<template>
  <div class="Echarts">
    <div id="main" style="width: 100%;height:500px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { selSaleQuotaCount } from "@/api/crm/index";

export default {
  props: {
    params: {startDate: '', endDate: ''}
  },
  name: 'saleBarChart',
  data(){
    return {
      names: [],
      values: [],
      chart: null
    }
  },
  methods:{
    initChart() {
      this.chart = echarts.init(document.getElementById('main'));
      this.setOptions(this.names, this.values)
    },
	  setOptions(names, values){
      this.chart.setOption({
			  title: {
				  text: '业绩排名'
			  },
			  tooltip: {},
			  legend: {
				  data:['销售额']
			  },
			  xAxis: {
				  data: names
			  },
			  yAxis: [{
            type : 'value',
            axisLabel:{formatter:'{value} 元'}
        }],
			  series: [{
				  type: 'bar',
				  data: values,
          itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#5470c6', '#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'];
                  var index=params.dataIndex%colorList.length;
                  return colorList[index]
                }
              }
          }
			  }]
		  })
		},
    selSaleQuotaCount(params){
      selSaleQuotaCount(params).then(response => {
        this.names = response.data.names;
        this.values = response.data.values;
        this.setOptions(this.names, this.values)
      });
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    })
  },
  watch: {
      //值改变时触发
      params: {
      　　handler(newValue, oldValue) {
            this.selSaleQuotaCount(this.params);
      　　},
          deep: true,
      　　immediate: true
      }
  }
}
</script>

<style>

</style>